<template>
  <div class="title">
    <div class="title-top">
      <div>
        <el-input
          style="width: 200px"
          v-model="leftInput"
          placeholder="根据用户名搜索"
        ></el-input>
        <el-button size="small "  @click='cleatInput'>清空</el-button>
        <el-button type="primary" size="small "  @click="searchInput">搜索</el-button>
      </div>
      <div>
        <el-button
          type="success"
          size="small"
          icon="el-icon-edit"
          @click="addDia"
          >新增用户</el-button
        >
      </div>
    </div>
    <!-- 消息提醒 -->
    <el-alert type="info" show-icon> 共{{total}}条消息 </el-alert>

    <!-- <user-add
text='创建用户'
:ruleInline='ruleInline'
:dialogFormVisible='dialogFormVisible'
:formBase='formBase'
:PermissionGroupsList='PermissionGroupsList'

/> -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="50%" center>
      <el-form
        style="width: 400px"
        :model="addRuleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addRuleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addRuleForm.email"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addRuleForm.password"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-input v-model="addRuleForm.role"></el-input>
        </el-form-item>
   <el-form-item label="性别" prop="sex">
          <el-input v-model="addRuleForm.sex"></el-input>
        </el-form-item>
        <!-- \权限组名称 -->
        <el-form-item label="权限组名称" prop="permission_group_id">
          <el-select class="filter-item" v-model="addRuleForm.permission_group_id">
            <el-option
              v-for="item in PermissionGroupsList"
              :value="item.id"
              :key="item.key"
              :label="item.title"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="联系电话"
          prop="phone"
        >
          <el-input v-model="addRuleForm.phone"></el-input>
        </el-form-item>
        <el-form-item
          label="介绍"
          prop="introduction"
        >
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="Please input"
            v-model="addRuleForm.introduction"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="createData"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import userAdd from './user-add.vue'
import { simple } from '@/api/base/permissions'
import { add, list } from '@/api/base/users'

export default {
  // components: { userAdd },
  props: ['formlist', 'total'],
  data () {
    return {
      leftInput: '',
      dialogVisible: false,
      addRuleForm: {
        avatar: '',
        email: '',
        // account: '',
        permission_group_id: '',
        phone: '',
        password: '',
        sex: ''
      },
      // 验证表单规则
      rules: {
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入emial', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码 ', trigger: 'blur' }
        ]

      },
      ruleForm: {
        name: ''
      },
      PermissionGroupsList: []
    }
  },

  created () {},

  methods: {
    // 添加弹框
    async addDia () {
      this.dialogVisible = true
      const res = await simple()
      this.PermissionGroupsList = res.data
    },
    // 表单提交
    createData () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          add(this.addRuleForm).then(() => {
            this.dialogVisible = false

            this.$message.success('新增用户成功')
            this.$emit('onsuccess')
          })
        } else {
          this.$Message.error('*号为必填项!')
        }
      })
    },
    async    onSearch () {
      this.formlist.username = this.leftInput
      const res = await list(this.formlist)
      console.log(res.data)
      this.$emit('onSearchUpdate', res.data)
    },
    // 清空搜索框
    cleatInput () {
      this.leftInput = ''
      this.formlist.username = this.leftInput
      this.$emit('onclaer', this.formlist)
    },

    // 搜索input
    searchInput () {
      this.formlist.username = this.leftInput
      this.$emit('onclaer', this.formlist)
    }
  }
}
</script>

<style scoped lang="scss">
.title-top {
  display: flex;
  justify-content: space-between;
  .el-input {
    margin-right: 15px;
  }
}
.el-alert {
  margin: 20px 0;
}
::v-deep .el-alert__icon.is-big {
  font-size: 16px;
}
.el-form {
  margin-left: 120px;
}
</style>
